<template>
	<view class="page" style="height:100vh;background: #ededed;">
		<free-nav-bar showback showright="true" title="添加标签">

			<view slot="right" class="main-bg-color rounded mr-3 px-2 py-1" @click="saveback">
				<text class="font text-white">保存</text>


			</view>
		</free-nav-bar>
		<view class="px-3 pt-3 pb-2 border-bottom flex align-center flex-wrap">
			<view class="border rounded-circle py-1 px-2 flex justify-center align-center mr-1 mb-1"
				v-for="item,index in list" @click="deltag(index)">
				<text class="font main-text-color">{{item}}</text>

			</view>
			<input type="text" @confirm="addtag" v-model="tag" confirm-type="send"
				class="border bg-white font rounded-circle text-center" style="border-style: dashed;width: 180rpx;"
				placeholder="添加标签">
		</view>

		<view class="flex flex-column">
			<text class="font-sm text-secondary px-3 py-2">所有标签</text>
			<view style="" class="font-md px-3 border bg-white flex flex-wrap align-center py-3">

				<view class="border bg-white main-text-color rounded-circle px-2 py-1 mr-1 mb-1 "
					v-for="item in allagList" @click="fastadd(item)">
					<text class="text-dark">{{item}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import freeNavBar from "@/components/free-ui/free-nav-bar.vue"
	import $H from '../../../utils/request.js';
	export default {
		components: {
			freeNavBar
		},
		data() {
			return {
				list: [],
				tag: "",
				allagList: [],
			}
		},
		onLoad(e) {
			console.log(e);
			this.list = JSON.parse(e.detail)
			this.getlist()
		},
		methods: {
			getlist() {
				$H.post("taglist", {
					token: true
				}).then(res => {
					console.log(res, "res")
					this.allagList = res.map((item) => {
						return item.name
					})
				})
			},
			saveback() {
				uni.$emit("updateTag", JSON.stringify(this.list))
				uni.navigateBack({
					delta: 1
				})
			},
			deltag(index) {
				uni.showModal({
					title: "是否删除该标签?",

					success: (res) => {
						console.log(res, "ress");
						if (res.confirm) {
							this.list.splice(index, 1)
						} else {
							uni.showToast({
								title: "已取消删除",
								icon: "error"
							})
						}

					},
					fail() {

					}
				})

			},
			fastadd(item) {
				if (this.list.indexOf(item) !== -1) {
					uni.showToast({
						title: "标签已存在",
						icon: "error"
					})
				} else {
					this.list.push(item);
				}
			},
			addtag() {
				if (this.tag !== '' && this.list.indexOf(this.tag) == -1) {
					this.list.push(this.tag)

				} else if (this.tag == '') {
					uni.showToast({
						title: "标签不能为空",
						icon: "error"
					})
				} else if (this.list.indexOf(this.tag) !== -1) {
					uni.showToast({
						title: "标签已存在",
						icon: "error"
					})
				}
				this.tag = ""

			},
		}
	}
</script>

<style>
</style>
